// Modal styles

.modal {
    background-color: rgba(0,0,0,.5);

    .dialog {
        background-color: white;
        border-radius: @border-radius;
        box-shadow: 20px 20px 40px 0px rgba(0, 0, 0, 0.45);

        // General typography
        h1 {
            font-size: 1.5em;
            margin-bottom: 0.2em;
        }

        h1, h2, h3, h4, h5, h6 {
          & small { color: var(--grey-3); }
        }

        // The UUID span
        span.uuid {
          color: var(--grey-3);
          margin-top: -0.5em;
          margin-bottom: 0.5em;
        }

        // Muted info spans that can be placed somewhere on dialogs
        span.info {
          color: var(--grey-3);
        }

        // The error span inside dialogs (inside the submit button group)
        span.error-info {
          color: var(--fg-error);
        }

        hr {
            border-bottom: 1px solid var(--grey-4);
            width: 80%;
        }

        // Why the .code-class? Because sometimes we have a small code area,
        // sometimes it's the only content of the dialog (in which case we
        // need to constrain its size in the geometry part)
        code, .code {
            border-radius: 2px;
            font-weight: bold;
            padding: 2px 5px;
        }

        // Forms

        label {
          margin-bottom: 0.2em;
          padding-bottom: 0;
          vertical-align: middle;
        }

        input {
          line-height: 150%;
          font-size: inherit;

          &.has-error { background-color: var(--bg-error) !important; }
        }

        input[type="text"], input[type="number"], button, a.button, textarea, select {
          background-color: var(--grey-0);
          line-height: 150%;
          border: none;
          border-radius: @border-radius;
          border-radius: @border-radius;
        }

        button, a.button {
          background-color: var(--grey-1);
          color: var(--grey-7);
          transition: 0.2s all ease;
          outline: 0;
          &:hover, &:focus {
            background-color: var(--c-primary);
            color: var(--bg-primary);
          }
        }

        // The wrapper for the preferences submit & cancel buttons
        .prefs-submit-group { clear: both; }

        .changelog {
            border: 1px solid var(--grey-4);
            border-radius: 2px;
        }

        // Positioning of the paper margin text elements
        div.paper {
            &.a4paper { border: 1px solid black; }

            .error {
                background-color: var(--bg-error);
                color: var(--fg-error);
                border: 1px solid var(--fg-error);
                border-radius: 5px;
            }
        }

        // Tabs styles
        .ui-tabs-nav {
            border-bottom: 1px solid var(--grey-1);

            .ui-tabs-tab {
                line-height: 200%;
                border-top-left-radius: @border-radius;
                border-top-right-radius: @border-radius;

                &.ui-tabs-active {
                  background-color: var(--c-primary);
                  a { color: white; }
                }

                a, &.ui-tabs-active:hover a {
                    color: black;
                    text-decoration: none;
                    text-align: center;
                }

                &:hover { background-color: var(--grey-1); }
            }
        }

        // Dictionary list styles
        ul.dicts-list {
            margin: 0px;
            border: 1px solid var(--grey-2);
            padding: 0;
            border-radius: 5px;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;

            li.dicts-list-item {
                padding: 10px;
                font-weight: bold;
                margin: 0;
                background-color: white;
                border-bottom: 1px solid var(--grey-2);
                &:hover {
                    background-color: var(--grey-0);
                }

                &:last-child {
                    border-bottom: none;
                }
            }
        }

        ul.user-dict {
          margin: 0px;
          border: 1px solid var(--grey-2);
          padding: 0;
          border-radius: 5px;

          li.user-dict-item {
            border-bottom: 1px solid var(--grey-2);

            clr-icon {
              color: var(--red-5);
            }

            &:hover { background-color: var(--red-0); color: white; }
          }
        }

        input.dicts-list-search {
            border: 1px solid var(--grey-2);
            background-color: white;
            border-bottom: none;
            font-size: inherit;
            display: block;
            margin: 0;
            padding: 10px;
            border-radius: 5px;
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
        }

        .selected-dict {
            color: white;
            cursor: pointer;
            background-color: var(--c-primary);
            border-radius: 5px;
            padding: 5px 10px;
            margin: 5px;
            border: 1px solid var(--c-primary-shade);

            &:after {
                content: "\00d7"; // &times;
                font-size: 150%;
                padding: 0px 5px;
                color: var(--c-primary-shade);
                line-height: 50%;
                vertical-align: baseline;
            }

            &:hover {
                background-color: darken(@c-primary, 10%);
                border-color: darken(@c-primary-shade, 10%);

                &:after {
                    color: darken(@c-primary-shade, 10%);
                }
            }
        }

        // Tag cloud related stuff
        .tag {
          display: inline-block;
          background-color: lighten(@c-primary, 10%);
          font-weight: bold;
          cursor: pointer;
          border-radius: @border-radius;
          border-bottom: 3px solid var(--c-primary);
          border-right: 3px solid var(--c-primary);
          color: var(grey-8);
          padding: 5px;
          margin: 5px;
          transition: 0.1s all ease;

          &:hover {
            background-color: var(--c-primary);
            border-color: darken(@c-primary, 10%);
          }

          small {
            // <small>s are the tag count
            color: darken(@c-primary, 20%);
            margin-left: 5px;
          }
        }

    } // END .dialog
} // END .modal
